<template>
  <el-container class="layout-container-demo">
    <Aside></Aside>
    <el-container class="layout-container-main" style="display: block">
      <Header></Header>
      <Content></Content>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import Aside from "@/components/layout/Aside.vue";
import Content from "@/components/layout/Content.vue";
import Header from "@/components/layout/Header.vue";
import {onMounted, onUnmounted, provide, ref} from "vue";

const windowWidth = ref(0)
const isCollapse = ref(false)

provide("isCollapse", isCollapse)



onMounted(() => {
  window.addEventListener('resize', checkScreenSize);
})

onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize);
  console.log("清理事件监听器")
})

const checkScreenSize = () => {
  windowWidth.value = window.innerWidth
  isCollapse.value = windowWidth.value <= 1000;
}

</script>

<style scoped>
.layout-container-main{
  height: 100vh;
}
</style>